<template>
  <ContentLoader v-if="showContent"
                class="list-loader">
    <rect x="60"
          y="20"
          rx="3"
          ry="3"
          width="250"
          height="10" />
    <rect x="60"
          y="40"
          rx="3"
          ry="3"
          width="220"
          height="10" />
    <rect x="60"
          y="60"
          rx="3"
          ry="3"
          width="170"
          height="10" />
    <rect x="60"
          y="80"
          rx="3"
          ry="3"
          width="250"
          height="10" />
  </ContentLoader>
  <div v-else
      class="home-wrapper">
    <div class="header-wrapper">
      <div class="header-name">{{ shopName }}</div>
      <div class="balance-btn"
          @click="handleBalance">
        <svg-icon icon-class="balance"
                  class-name="custom-class"
                  class="home-icon" />
      </div>
    </div>
    <div class="order-info-container">
      <div class="order-num order-info-item">
        <div class="num">
          <count-to :start-val="0"
                    :end-val="info.todayOrder"
                    :duration="2200"
                    separator="" />
        </div>
        <div class="desc">今日订单数</div>
      </div>
      <div class="today-amount order-info-item">
        <div class="price">
          <count-to :start-val="0"
                    :end-val="info.todaySales"
                    :duration="2000"
                    separator="" :decimals="2" />
        </div>
        <div class="desc">今日销售额</div>
      </div>
    </div>
    <div class="info-container">
      <Tab />
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"
                    v-on:consumed="handleOpen" />
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"
                  v-on:consumed="handleOpen" />
    </div>
    <van-popup v-model="show"
              class="pop">
      <Pop :show="show"
          @close="show = false"
          @submit="handleConsumed"
          @scroll="handleScrollBottom" />
    </van-popup>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import Tab from '@/components/Tab'
import Pop from '@/components/Pop'
import { mapGetters } from 'vuex'
import { orderNum } from '@/api/order'
import { ContentLoader } from 'vue-content-loader'
import { consumedAdd } from '@/api/consumed'

export default {
  name: 'home',
  components: {
    Tab,
    Pop,
    CountTo,
    ContentLoader
  },
  data () {
    return {
      btnDesc: '登录',
      show: false,
      info: {
        todaySales: 0,
        todayOrder: 0
      },
      showContent: true,
      sub_type: 0
    }
  },
  computed: {
    ...mapGetters(['name', 'updateStatus', 'shopName'])
  },
  watch: {
    updateStatus: {
      handler: function (status) {
        if (status) {
          this.initOrderNo()
        }
      }
    }
  },
  created () {
    this.initOrderNo()
  },
  methods: {
    handleOpen (subType) {
      this.show = true
      this.sub_type = subType
    },
    handleBalance () {
      this.$router.push({
        path: '/balance'
      })
    },
    async initOrderNo () {
      try {
        const res = await orderNum()
        const { todayOrder, todaySales } = res.data
        this.info = { todayOrder, todaySales }
        this.showContent = false
        this.$store.dispatch('home/updataOrder', false)
      } catch (error) {
        this.showContent = false
        this.$store.dispatch('home/updataOrder', false)
      }
    },
    // 核销
    async handleConsumed (code) {
      this.$toast.loading({
        mask: false,
        message: '核销中'
      })
      try {
        await consumedAdd({ write_off_code: code })
        this.$toast.clear()
        this.show = false
        this.$toast.success({
          message: '核销成功',
          duration: 1000
        })
        if (Number(this.sub_type) !== 1) {
          this.$store.dispatch('home/setIsDelete', true)
        } else {
          this.$store.dispatch('home/setType', this.sub_type)
        }
        window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight))
      } catch (error) {
        // this.$toast.clear()
        // this.show = false
      }
    },
    handleScrollBottom () {
      window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight))
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'

.home-wrapper
  initPosition()
  background-color $home_gray

  .header-wrapper
    display flex
    justify-content space-between
    height 88px
    align-items center
    padding-left 24px
    box-sizing border-box
    background-color $common_bgc

    .header-name
      font-size $home_header_size
      color $home_header_font_color
      flex 1
      min-width 0
      ellipsis()

    .balance-btn
      height 100%
      display flex
      text-align right
      align-items center

      .home-icon
        width 66px
        height 60px

  .order-info-container
    width 100%
    height 136px
    display flex
    justify-content center
    padding-left 24px
    padding-right 24px
    box-sizing border-box
    box-shadow 0px 8px 8px 0px rgba(22, 25, 31, 0.2)
    background-color $common_bgc

    .order-info-item
      padding-top 20px
      padding-bottom 20px
      box-sizing border-box
      text-align center
      flex 1
      height 100%

      .desc
        line-height 50px
        color $home_font_color
        font-size $home_size

      .num, .price
        line-height 52px
        color $primary
        font-size $home_header_size

    .order-num
      position relative

      &::before
        content ''
        position absolute
        width 1px
        height 56px
        background #E6E7EB
        right 0
        top 50%
        transform translateY(-50%)

  .info-container
    background-color $home_gray
    padding-top 36px
    padding-left 24px
    padding-right 24px
    box-sizing border-box

  .pop
    border-radius 20px

  .list-loader
    padding-top 20px
    box-sizing border-box
</style>
